﻿<div class="jumbotron">
    <h1>Sample to invoke Web API</h1>
</div>
<div class="row">
    <div class="col-md-9">
        <div>
            <div>
                ProductName:<input id="txtProductName" type="text" />
            </div>
            <div>
                Description:&nbsp;&nbsp;&nbsp;&nbsp;<input id="txtDescription" type="text" />
            </div>
            <div>
                <input type="button" id="btnSubmit" value="Submit" onclick="SubmitData()" />
                <input type="button" id="btnDelete" value="Delete" onclick="Delete()" />
                <input type="hidden" id="hiddenId" value="" />
            </div>
        </div>
        <div id="dvShow">
        </div>
        <br />
        <hr style="filter: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)" width="100%" color="#987cb9" size="1" />

        <!-- Table goes in the document BODY -->
        <table class="altrowstable" id="productList" style="width:65%"></table>

        <hr style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)" width="100%" color=#987cb9 size=1>
    </div>
</div>
<script type="text/html" id="product-tmpl">
    <tr>
        <td data-toggle="update"><a data-content="Id" href="#"></a></td>
        <td data-content="ProductName"></td>
        <td data-content="Description"></td>
    </tr>
</script>
<script type="text/javascript">
    $(document).ready(function () {
        //load data
        loadData();
        window.onload = function () {
            altRows('productList');
        }
        $("#btnDelete").hide();
    });

    //Javascript goes in the document HEAD
    function altRows(id) {
        if (document.getElementsByTagName) {

            var table = document.getElementById(id);
            var rows = table.getElementsByTagName("tr");

            for (i = 0; i < rows.length; i++) {
                if (i % 2 == 0) {
                    rows[i].className = "evenrowcolor";
                } else {
                    rows[i].className = "oddrowcolor";
                }
            }
        }
    }

    //load data when open the page
    var loadData = function () {
        var url = "api/Products/Get";
        $.get(url, null, function (result) {
            var array = result.data;
            $("#productList").loadTemplate($("#product-tmpl"), array, {
                complete: function () {
                    //$("#userList").listview("refresh");
                    $("[data-toggle='update']").on("click", function () {
                        var id = $(this).text();
                        SelectProduct(id);
                    });
                }
            });
        });
    };

    //select Product
    function SelectProduct(id) {
        var url = "api/Products/Get/" + id;
        $.get(url, null, function (result) {
            var user = result.data;
            $("#txtProductName").val(user.ProductName);
            $("#txtDescription").val(user.Description);
            $("#hiddenId").val(user.Id);
            $("#btnDelete").show();
        });
    }

    //click Submit button
    function SubmitData() {
        var id = $("#hiddenId").val();
        if (id === "") {
            Add();
        }
        else {
            Update();
        }
    }

    //send data with object
    function Add() {
        var productName = $("#txtProductName").val();
        var description = $("#txtDescription").val();
        var url = "api/Products/Add";
        var data = {
            "ProductName": productName,
            "Description": description
        };
        var json = JSON.stringify(data);
        $.ajax({
            type: "POST",
            url: url,
            data: json,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            processData: true,
            success: function (result, status, jqXHR) {
                $("#dvShow").html(result.message);
                window.location.reload();
            },
            error: function (result) {
                $("#dvShow").html(result.message);
            }
        });
    }

    //delete
    function Delete() {
        var id = $("#hiddenId").val();
        var url = "api/Products/Delete";
        var data = {
            "Id": id
        };
        var json = JSON.stringify(data);
        $.ajax({
            type: "POST",
            url: url,
            data: json,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            processData: true,
            success: function (result, status, jqXHR) {
                $("#dvShow").html(result.message);
                setTimeout(function () {
                    alert(result.message)
                    window.location.reload();
                }, 1000);
            },
            error: function (result) {
                $("#dvShow").html(result.message);
            }
        });
    }

    //update
    function Update() {
        var id = $("#hiddenId").val();
        var url = "api/Products/Update";
        var productName = $("#txtProductName").val();
        var description = $("#txtDescription").val();
        var data = {
            "Id": id,
            "ProductName": productName,
            "Description": description
        };
        var json = JSON.stringify(data);
        $.ajax({
            type: "POST",
            url: url,
            data: json,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            processData: true,
            success: function (result, status, jqXHR) {
                $("#dvShow").html(result.message);
                setTimeout(function () {
                    alert(result.message)
                    window.location.reload();
                }, 1000);
            },
            error: function (result) {
                $("#dvShow").html(result.message);
            }
        });
    }
</script>

